<template>
  <div>
    <el-popover ref="messagePop" placement="bottom" :width="360" trigger="click">
      <template #reference>
        <el-badge :is-dot="activeDot" class="message-item">
          <svg-icon icon-class="small-bell" class="el-dropdown-link"><caret-bottom /></svg-icon>
        </el-badge>
      </template>
      <div class="message-top-box">
        <el-button class="self-message-button">
          <span class="self-message-text">我的消息</span>
        </el-button>
        <div class="message-content-box">
          <div class="message-content-list" v-for="(item,index) in messageList" :key="index">
            <span style="text-align: left">{{item.name+':'}}&nbsp;</span>
            <a class="message-link" @click="goToEvent(item.eventId)" >{{ item.message }}</a>
<!--            <div>
              <el-link type="primary" :underline="false" @click="goToEvent(item.messageSourceId)">
                <span >{{ '&nbsp;&nbsp;'+item.message }}</span>
              </el-link>
            </div>-->

          </div>
        </div>
      </div>
      <div class="footer-box">
        <el-button
            class="message-footer-button"
            link
            type=""
            icon="Setting"
            @click="settingRelation"
        >设置</el-button>
        <el-button
            style="float: right"
            link
            type=""
            icon="Delete"
            @click="clean"
        >清空</el-button>
      </div>
    </el-popover>

  </div>
</template>

<script setup>
import { getUserNotice } from "@/api/coal/messageNotice";

const { proxy } = getCurrentInstance();
const router = useRouter();

const autoClose = ref(600_000)
const activeDot = ref(false)
const messageList = ref([])
const messagePop = ref(null)

let messageInterval = ref<String>("");

onMounted(() => {
  getMessage()
  messageInterval = setInterval(()=>{
    getMessage()
  },60_000)
})

function getMessage(){
  // todo 暂时不需要使用
  /*getUserNotice().then(resp=>{
    messageList.value = messageList.value.concat(resp.data)
    activeDot.value = messageList.value && messageList.value.length > 0
  })*/
}

function goToEvent(eventId){
  messagePop.value.hide()
  router.push({ path: "/message/event/index/"+eventId });
}

function settingRelation(){
  messagePop.value.hide()
  router.push({ path: "/message/messageSource" });
}

function clean(){
  messageList.value = []
  activeDot.value = false
  proxy.$modal.msgSuccess("清空成功")
}

onBeforeUnmount(() => {
  clearInterval(messageInterval)
})
</script>
<style scoped>
.message-item {
  line-height: 32px;
}
.message-top-box {
  width: 100%;
  height: 390px;
  padding: 0;
}
.self-message-button {
  width: 100%;
  height: 38px;
  border-top: none;
  border-left: none;
  border-right: none
}
.self-message-text {
  font-size: 16px;
  font-weight: bold
}
.message-content-box {
  height: 352px;
  overflow-x: hidden;
  overflow-y: auto;
}
.message-content-list {
  font-size: 14px;
  line-height: 24px;
  padding: 12px;
  border-bottom: rgba(90,94,102,0.19) solid 1px

}
.footer-box {
  height: 28px;
  border-top: rgba(90,94,102,0.1) solid 1px;
  padding: 8px
}
.message-link {
  color: dodgerblue
}
.message-link:hover {
  color: lightskyblue;
}
.message-footer-button {
  color: #8590A6
}
.message-footer-button:hover {
  color: gray;
}
</style>
